﻿<!doctype html>
<html>
<head><meta charset="utf-8" /></head>
<title>canvas test</title>

<style type="text/css">
	html, body { border: 0; margin: 0; height: 100%; height: 100%;}
	canvas { display: block; background-color: #67a;}
</style>

<body>
<canvas id = "canvas2D"></canvas>

<script>

var canvasElement = document.getElementById('canvas2D');
canvasElement.width = window.innerWidth;
canvasElement.height = window.innerHeight;

var g2D = canvasElement.getContext("2d");
//if(!g2D) return;

// draw background color
g2D.fillStyle = '#ccf';
g2D.fillRect(0, 0, canvasElement.width,canvasElement.height);

function createCanopy()
{
	g2D.beginPath();
	g2D.moveTo(-25, -50);
	g2D.lineTo(-10, -80);
	g2D.lineTo(-20, -80);
	g2D.lineTo(-5, -110);
	g2D.lineTo(-15, -110);

	g2D.lineTo(0, -140);

	g2D.lineTo(15, -110);
	g2D.lineTo(5, -110);
	g2D.lineTo(20, -80);
	g2D.lineTo(10, -80);
	g2D.lineTo(25, -50);
	g2D.closePath();
}

function drawPine(s)
{
	g2D.save();
	var t = window.innerHeight;
	g2D.shadowOffsetX = 0;
	g2D.shadowOffsetY = s*t;
	g2D.shadowBlur    = 8;
	g2D.shadowColor   = 'rgba(0, 0, 0, 10.0)';

	g2D.transform(	 1, 0,
	              -0.5, 1,
	                 0, -t);
	g2D.scale(1.0, 0.5);
	g2D.fillStyle = 'rgba(0, 0, 0, 0.15)';
	g2D.fillRect(-5, -50, 10, 50);
	createCanopy();
	g2D.fill();
	g2D.restore();

	createCanopy();

	g2D.lineWidth = 1.5;
	g2D.strokeStyle = '#663300';
	g2D.lineJoin = 'round';

//	g2D.fillStyle = '#339900';
	var floor = Math.floor;
	var cx = Math.random() *200 + 55;
	var cy = Math.random() *200.7 + 55.3;
	var cz = Math.random() *200.7 + 55.3;
	var ca = Math.random() *0.7 + 0.3;
	g2D.fillStyle = "rgb("+floor(cx)+","+floor(cy)+","+floor(cz)+")";
	g2D.fill();

	var trunkGradient = g2D.createLinearGradient(-5, -50, 5, -50);
	trunkGradient.addColorStop(0, '#663300');
	trunkGradient.addColorStop(0.64, '#996600');
	trunkGradient.addColorStop(0.4, '#886600');
	trunkGradient.addColorStop(1, '#553220');
	g2D.fillStyle = trunkGradient;
	g2D.fillRect(-5, -50, 10, 50);

	var canopyShadow = g2D.createLinearGradient(0, -50, 0, 0);
	canopyShadow.addColorStop(0, 'rgba(0, 0, 0, 0.4)');
	canopyShadow.addColorStop(0.15, 'rgba(0, 0, 0, 0.0)');
	canopyShadow.addColorStop(0.85, 'rgba(0, 0, 0, 0.0)');
	canopyShadow.addColorStop(1, 'rgba(0, 0, 0, 0.3)');
	g2D.fillStyle = canopyShadow;
	g2D.fillRect(-5, -50, 10, 50);

	g2D.stroke();


}
g2D.shadowOffsetX = 0;
g2D.shadowOffsetY = 0;
g2D.shadowBlur    = 32;
g2D.shadowColor   = 'rgba(0, 0, 0, 0.1)';

var quickSort = function(arr, key)
{
	if(arr.length <= 0) return arr;

}

var numPine = 14 * Math.random()+ 1;

var pines = [];

for(var i = 0; i < numPine; i++)
{
	var p = {};
	p.x = (canvasElement.width-200) * Math.random() + 100;
	p.y = (canvasElement.height-100) * Math.random()+ 100;
	for(var j = 0; j < pines.length; j++)
	{
		if(p.y < pines[j].y)
		{
			var t = pines[j];
			pines[j] = p;
			p = t;
		}
	}
	pines.push(p);

}
for(var i = 0; i < numPine; i++)
{
	var s = 0.6;
	var p = pines[i];
	var t = 4 * p.y / window.innerHeight;

	g2D.save();
	g2D.translate(p.x, p.y);
	g2D.scale(t, t*s);
	drawPine(t*s);
	g2D.restore();
}



</script>
</body>
</html>